DOMでCalendar UIを作る

先行事例

キーボード操作への配慮

react native向けなので、web browserでdom構造を確認することはできなかった

2024-03-30 19:35:12 タスクを記入できる空間を作ってみる

19:38:15 google calendarが別のDOM日付を表示していた理由がわかったかも

大きさと位置を全てのcellで揃えるためだ

code:table.tsx

/** @jsx h */

/** @jsxFrag Fragment */

import {h, Fragment, render} from "../preact/mod.tsx";

import { getAllDaysInCalendar } from "../getAllDaysInCalendar/mod.ts";

import { isToday } from "../date-fns/mod.ts";

const App = ({ onClose }) => {

const weeks = getAllDaysInCalendar(new Date());

const month = new Date().getMonth();

return (<>

<style>{`

.calendar-wrap {

position: fixed;

top: 10%;

left 10%;

margin: 0 auto;

}

@media (max-width: 767.98px) {

.calendar-wrap {

display: flex;

flex-direction: column;

}

}

.calendar {

width: 100%;

border-collapse: collapse;

th, td {

font-size: 14px;

font-weight: bold;

padding: unset;

}

th { padding: 6px 10px; }

.cell {

text-align: center;

padding: 10px;

}

.sun {

}

.sat {

}

}

@media (max-width: 767.98px) {

.calendar {

.cell {

padding: 6px;

font-size: 12px;

}

th.cell { padding: 3px 6px; }

}

}

`}</style>

<div className="calendar-wrap" onClick={onClose}>

<table className="calendar">

<thead>

<tr>

<th className="cell sun">Sun</th>

<th className="cell">Mon</th>

<th className="cell">Tue</th>

<th className="cell">Wed</th>

<th className="cell">Thu</th>

<th className="cell">Fri</th>

<th className="cell sat">Sat</th>

</tr>

</thead>

<tbody>{weeks.map(

(dates) => (<tr>{dates.map((date) => (<td><DateCell date={date} month={month} /></td>))}</tr>)

)}</tbody>

</table>

</div>

</>);

};

const DateCell = ({ date, month }) => {

if (isToday(date)) classNames.push("today");

if (date.getDay() === 0) classNames.push("sun");

if (date.getDay() === 6) classNames.push("sat");

if (date.getMonth() !== month) classNames.push("mute");

return (<div className={classNames.join(" ")}>{date.getDate()}</div>);

};

const div = document.createElement("div");

const shadowRoot = div.attachShadow({ mode: "open" });

document.body.append(div);

// 消すときはカレンダーをクリックする

render(<App onClose={() => div.remove()}/>, shadowRoot);